<template>
	<div class="detailHeader">
		<el-collapse v-model="activeNames">
			<el-collapse-item :title="data.title" :name="data.name" v-for="data in collapseList" :key="data.title">
        <template slot="title" v-if="data.slotTitle">
          <div v-for="t in data.slotTitle" :key="t.title" style="margin:0 10px">
            <span v-if="t.type === 'span'">{{t.title}}</span>
            <el-select
              v-else-if="t.type === 'select'"
              v-model="formData[t.prop]"
              filterable
              :multiple="t.multiple"
              collapse-tags
              size="mini"
              :clearable="t.clearable"
              class="others"
              @change="processChange"
              :placeholder="t.placeholder"
              :disabled="t.disabled"
            >
              <el-option
                v-for="(i, index) in t.option"
                :key="index"
                :label="i[t.optionLabel]"
                :value="i[t.optionValue]"
              ></el-option>
            </el-select>
          </div>


        </template>
        <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
					<el-row :gutter="20">
						<el-col :span="item.colSpan" v-for="item in data.formItemList" :key="item.label">
							<el-form-item :label="item.label" :prop="item.prop" :class="item.class === undefined ? 'top' : item.class">
                <div slot="label" v-if="item.slotLabel" style="display:inline-block" :style="{width:item.width}">
                  <span v-for="i in item.slotLabel" :key="i.label" style="margin:0 10px">
                    <span v-if="i.type === 'span'">{{i.label}}</span>
                    <el-button
                      v-else-if="i.type === 'button'"
                      size="mini"
                      :type="i.buttonType"
                      :disabled="i.disabled"
                      :icon="i.icon"
                      @click="buttonClick(i.click)"
                    >{{i.buttonName}}</el-button>
                  </span>

                </div>
								<el-select
									v-if="item.type === 'select'"
									v-model="formData[item.prop]"

                  :value-key="item.optionValue"
									filterable
									:multiple="item.multiple"
									collapse-tags
									size="mini"
									:clearable="item.clearable"
									class="others"
									@change="processChange"
									:placeholder="item.placeholder"
									:loading="loading"
									:disabled="item.disabled"
								>
									<el-option
										v-for="(i, index) in item.option"
										:key="index"
										:label="i[item.optionLabel]"
										:value="{[item.optionLabel]:i[item.optionLabel],[item.optionValue]:i[item.optionValue]}"
									></el-option>
								</el-select>
								<el-input
									v-else-if="item.type === 'input'"
									v-model="formData[item.prop]"
									size="mini"
									:placeholder="item.placeholder"
									:disabled="item.disabled"
								/>
								<el-date-picker
									v-else-if="item.type === 'date'"
									v-model="formData[item.prop]"
									type="date"
                  size="mini"
									:disabled="item.disabled"
									:placeholder="item.placeholder"
								></el-date-picker>
								<el-checkbox-group v-else-if="item.type === 'checkbox'" v-model="formData[item.prop]">
									<el-checkbox v-for="(i, index) in item.option" :label="i" :key="index">{{ i }}</el-checkbox>
								</el-checkbox-group>
								<el-upload
									v-else-if="item.type === 'upload'"
									class="upload-demo"
									action=""
									:http-request="upload"
									:file-list="fileList"
								>
									<el-button size="small" icon="el-icon-upload2" plain>点击上传</el-button>
									<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
								</el-upload>
								<el-input
									v-else-if="item.type === 'textarea'"
									type="textarea"
									:rows="2"
									:placeholder="item.placeholder"
									:disabled="item.disabled"
									v-model="formData[item.prop]"
								></el-input>
                <el-button
									v-else-if="item.type === 'button'"
                  size="mini"
                  :type="item.buttonType"
									:disabled="item.disabled"
                  :icon="item.icon"
                  @click="buttonClick(item.click)"
                >{{item.buttonName}}</el-button>
                <BaseTable
                  v-else-if="item.type === 'table'"
                  :data="item.data"
                  :columns="item.columns"
                  :maxTableHeight="item.maxTableHeight"
                  :pagination="false"
                ></BaseTable>
                <el-card :class="item.cardClass" v-else-if="item.type === 'card'">
                  {{item.cardText}}
                </el-card>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script>
import { mapState } from 'vuex'
import BaseTable from '@/components/BaseTable'

export default {
  name: 'detail',
  components: { BaseTable },
  props: {
    // form表单
    ruleForm: {
      type: Object
    },
    // 返回
    goBack: {
      type: Function
    },
    // 编辑
    detailType: {
      type: Number
    },
    // 下拉部分遍历数据
    collapseList: {
      type: Object
    },
    // 表单验证规则
    rules: {
      type: Object
    }
  },
  data() {
    return {
      activeNames: ['1', '2'],
      formData: {
      }, // from
      fileList: [],

      isShow: false, // 是否显示票货弹窗
      prefixCodeList: [], // 前缀
      valid: '', // 校验值
      loading: false, // 下拉框加载状态
      prefixCode: '', // 前缀
      isChooseDes: '', //
      processName: ''
    }
  },
  created() {
    // this.$nextTick(() => {
    //   this.$refs.ruleForm.clearValidate()
    //   this.getProcessList('')
    // })
  },
  computed: {
    ...mapState({
      num: state => state.num,
      weight: state => state.weight
    })
  },
  watch: {
    ruleForm: {
      handler(value) {
        console.log(value)
      },
      immediate: true
    },
    num: {
      handler(value) {
        this.$set(this.formData, 'num', value)
      },
      deep: true
    },
    weight: {
      handler(value) {
        this.$set(this.formData, 'weight', value)
      },
      deep: true
    }
  },
  mounted() {
    // this.formData = value
    // this.getProcessList('')
  },
  methods: {
    /**
		 * 上传附件
		 */
    upload(file) {
      console.log(file, 'file')
      const formData = new FormData()
      formData.append('file', file.file)
      //   api.uploadD(formData).then(response => {
      //     if (response.code === '00000000') {
      //       this.$message({
      //         message: response.data,
      //         type: 'success'
      //       });
      //       this.getEdiHc().then(res => {
      //         this.getEdiJx(this.ediData[0].id)
      //       })
      //     }
      //   })
    },
    /**
     * 按钮事件
     */
    buttonClick(i) {
      i()()
    },
    /**
		 * @Author: gonghairun
		 * @description: 输入件数
		 * @param {*}
		 * @return {*}
		 */
    numInput(value) {
      if (value.length > 11) {
        value = value.slice(0, 11) // 新增最多只能输入11 位整数
      }
      this.formData.num = ('' + value) // 第一步：转成字符串
        .replace(/[^\d]+/g, '') // 第二步：把不是数字，不是小数点的过滤掉
        .replace(/^0+(\d)/, '$1') // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
      // .replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
      // .match(/^\d*(\.?\d{0,3})/g)[0] || ""; // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
      this.$store.commit('SET_NUM', this.formData.num)
    },
    /**
		 * @Author: gonghairun
		 * @description: 输入重量
		 * @param {*}
		 * @return {*}
		 */
    // weightInput(value) {
    //   this.formData.weight =
    // 		('' + value) // 第一步：转成字符串
    // 		  .replace(/[^\d^\.]+/g, '') // 第二步：把不是数字，不是小数点的过滤掉
    // 		  .replace(/^0+(\d)/, '$1') // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
    // 		  .replace(/^\./, '0.') // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
    // 		  .match(/^\d*(\.?\d{0,3})/g)[0] || '' // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
    //   this.$store.commit('SET_WEIGHT', this.formData.weight)
    // },
    mergeChange(value) {
      this.formData.isMerge = value
      this.$store.commit('SET_ISMERGE', value)
    },
    /**
		 * @Author: gonghairun
		 * @description: 关闭弹窗显示
		 * @param {*} done
		 * @return {*}
		 */
    handleClose(done) {
      // this.$confirm('确认关闭？').then(_ => {
      done()
      // })
      // .catch(_ => {});
    },
    /**
		 * @Author: gonghairun
		 * @description: 驳船模糊查询
		 * @param {*}
		 * @return {*}
		 */
    remoteMethodProcess(query) {
      if (query !== '') {
        this.loading = true
        setTimeout(async() => {
          this.loading = false
          this.getProcessList(query)
        }, 300)
      } else {
        this.getProcessList('')
      }
    },
    /**
		 * @Author: gonghairun
		 * @description: 修改操作过程
		 * @param {*}
		 * @return {*}
		 */
    processChange(value) {
      console.log(value)
    },
    /**
		 * @Author: gonghairun
		 * @description: 双击获取选中数据
		 * @param {*} value
		 * @return {*}
		 */
    dbHandleClick(value) {
      this.$set(this.formData, 'companyCode', value.companyCode)
      this.$set(this.formData, 'companyName', value.companyName)
      this.$set(this.formData, 'cargoAgentId', value.cargoAgentId)
      this.$set(this.formData, 'cargoAgentName', value.cargoAgentName)
      this.$set(this.formData, 'shipperName', value.shipperName)
      this.$set(this.formData, 'shipperId', value.shipperId)
      this.$set(this.formData, 'inoutTypeLabel', value.inoutTypeLabel)
      this.$set(this.formData, 'inoutType', value.inoutType)
      this.$set(this.formData, 'tradeTypeLabel', value.tradeTypeLabel)
      this.$set(this.formData, 'tradeType', value.tradeType)
      this.$set(this.formData, 'cargoInfoCode', value.cargoInfoCode)
      this.$set(this.formData, 'cargoInfoName', value.cargoInfoName)
      this.$store.commit('SET_ISNEW', value.isNew === undefined ? '01' : '02')
      this.$store.commit('SET_CARGOINFOCODE', value.cargoInfoCode)
      this.$store.commit('SET_TICKETID', value.id)
      this.$store.commit('SET_TICKETINFO', value)
      this.isShow = false
    },
    /**
		 * @Author: gonghairun
		 * @description: 选择票货
		 * @param {*}
		 * @return {*}
		 */
    selectCargoInfo() {
      this.isShow = true
    },
    /**
		 * @Author: gonghairun
		 * @description: 获取操作过程数据
		 * @param {*}
		 * @return {*}
		 */
    getProcessList(keyword) {
      const _this = this
      _this.processList = []
      _this.$http
        .get(
          `/${this.$ServiceName}/api/external/protected/listcompanyprocess?parentid=0&keyword=${keyword}&code=${_this.formData.processCode.join(
            ','
          )}&prefixcode=${_this.prefixCode}&ischoosedes=${_this.isChooseDes}`
        )
        .then(res => {
          console.log(res)
          _this.processList = res.data.data
          _this.totalProcessList = res.data.data
        })
        .catch(() => {})
    },
    /**
		 * @Author: gonghairun
		 * @description: form表单校验
		 * @param {*}
		 * @return {*}
		 */
    submit() {
      this.$refs['ruleForm'].validate(valid => {
        this.valid = valid
        if (!valid) {
          return false
        }
      })
      return this.valid
    },
    /**
		 * @name: 去重
		 * @author: gonghairun
		 * @msg:
		 * @param {type}
		 * @return {type}
		 */
    unique(arr) {
      return Array.from(new Set(arr))
    }
  }
}
</script>

<style lang="less" scoped>
@import "./index.less";
[v-cloak] {
	display: none;
}
</style>
